<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> div </title>

    </head>
    <body>
        <div style="width: 500px">
            <div style="background-color: darkorange">
                <h1 style="text-align: center;margin-bottom:0">这是主题</h1>
            </div>
            <div style="background-color: cyan;width: 100px;vertical-align: top;height:200px;float: left">
                <!--必须使用float来让两个块合在一起,因为div是块级元素,所以两个块之间会有空行,而在使用float之后,就不会出现这个问题了-->
                <h2 style="text-align: left">菜单</h2>
                <h2>HTML</h2>
                <h2>HTML</h2>
                <h2>HTML</h2>
            </div>
            <div style="background-color: cornsilk;width: 400px;vertical-align: top;height:200px;float: left">
                <p>HTML  css</p>
            </div>
            <div style="background-color: chartreuse;width: 500px;clear: both;"> <!--清除浮动是干嘛的?-->
                <p style="text-align: center">版权所有</p>
            </div>
        </div>
        
    </body>
</html>